<template>
	<view class="main-box">
		<view class="navigator-bar" :style="style">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">修改密码</text>
			<view class="submit-button" @click="changePassword()">完成</view>
		</view>
		<view class="input-box">
			<input placeholder="输入旧密码" v-model="oldPwd" password="ture" />
		</view>
		<view class="input-box">
			<input placeholder="输入新密码" v-model="newFirstPwd" password="ture" />
		</view>
		<view class="input-box">
			<input placeholder="确认新密码" v-model="newSecondPwd" password="ture" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style: 'margin-top: 0px;',
				oldPwd: '',
				newFirstPwd: '',
				newSecondPwd: ''
			};
		},
		onLoad() {
			this.style = `margin-top: ${this.$safeTop}px`;
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			changePassword() {
				if (!this.oldPwd) {
					uni.showToast({
						title: '请输入旧密码',
						icon: 'none'
					})
					return;
				}
				if (!this.newFirstPwd) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return;
				}
				if (!this.newSecondPwd) {
					uni.showToast({
						title: '请确认新密码',
						icon: 'none'
					})
					return;
				}
				if (this.newFirstPwd !== this.newSecondPwd) {
					uni.showToast({
						title: '请确认两次新密码一致',
						icon: 'none'
					})
					return;
				}
				const params = {
					password: this.newSecondPwd,
					oldPassword: this.oldPwd
				}
				this.$apis.changePassword(params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '修改成功!',
							icon: 'success'
						})
						uni.navigateBack();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.submit-button {
				margin-right: 42rpx;
				width: 123rpx;
				height: 61rpx;
				background: #FF5E2E;
				border-radius: 31rpx;
				font-size: 31rpx;
				line-height: 61rpx;
				text-align: center;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 999;
			}
		}
		
		.input-box {
			width: 654rpx;
			height: 96rpx;
			border-bottom: 2rpx solid #F0F3F6;
			margin-top: 32rpx;
			
			input {
				width: 654rpx;
				height: 96rpx;
				font-size: 32rpx;
				font-weight: 400;
				// color: #DDDDDD;
			}
		}
	}
</style>
